import './Mine.css'
import { useEffect, useState } from 'react';
import GeRenxinxi from './Messages/GeRenxinxi'
import WoDeXiaZai from './MineXiaZai/WoDeXiaZai'
import XiaoXiZhongXin from './LikeZhongX/XiaoXiZhongXin'

const Mine = () => {
    const [activeTab, setActiveTab] = useState<string>('info');

    const handleTabClick = (tab: string) => {
        setActiveTab(tab);
    };
    
    useEffect(() => {
        const copyIdButton = document.getElementById('copyIdButton') as HTMLButtonElement;
        const elementId = document.getElementById('elementId')?.textContent ?? '';

        if (copyIdButton) {
            copyIdButton.addEventListener('click', () => {
                navigator.clipboard.writeText(elementId)
                    .then(() => alert('复制成功!'))
            });
        }
        
        return () => {
            if (copyIdButton) {
                copyIdButton.removeEventListener('click', () => { });
            }
        };
    }, []);

    return (
        <div className="mineBox">
            <div style={{ width: '1250px', margin: '0 auto', padding: '10px', border: '1px solid #ccc', borderRadius: '5px', marginTop: '7%', boxShadow: '6px 6px 6px 6px rgba(0, 0, 0, 0.2)' }}>
                <div style={{ height: '1450px', overflowY: 'auto', marginBottom: '10px' }}>
                    <div className="container">
                        <div className="tabs">
                            <div style={{ width: '100%', height: '200px' }}>
                                <img className='touxiang' src="https://thirdqq.qlogo.cn/ek_qqapp/AQR4bib7YrPZuiaM7pziaRJRdSiaUcLALqhojyyH1zu1pC7dvTSONUKoqjV0RZ2LicUshRzkMRpSTgTgiaKIMqy6lFkXIPVKdCAkrsVg2hicNnVZyVsnRcJjHc/100" alt="" />
                                <p style={{ textAlign: 'center', lineHeight: '35px' }}>名称:9</p>
                                <p style={{ textAlign: 'center', float: 'left', marginLeft: '65px', marginRight: '20px' }}>包图号: <span id="elementId">55082132</span> </p>
                                <button style={{ border: '0' }} id="copyIdButton">复制</button>
                            </div>
                            <div
                                className={`tab ${activeTab === 'info' ? 'active' : ''}`}
                                onClick={() => handleTabClick('info')}
                            >
                                我的信息
                            </div>
                            <div
                                className={`tab ${activeTab === 'renwuzxin' ? 'active' : ''}`}
                                onClick={() => handleTabClick('renwuzxin')}
                            >
                                任务中心
                            </div>
                            <div
                                className={`tab ${activeTab === 'qiyezhuye' ? 'active' : ''}`}
                                onClick={() => handleTabClick('qiyezhuye')}
                            >
                                企业主页
                            </div>
                            <div
                                className={`tab ${activeTab === 'membership' ? 'active' : ''}`}
                                onClick={() => handleTabClick('membership')}
                            >
                                我的会员
                            </div>
                            <div
                                className={`tab ${activeTab === 'minelipin' ? 'active' : ''}`}
                                onClick={() => handleTabClick('minelipin')}
                            >
                                我的礼品
                            </div>
                            <div
                                className={`tab ${activeTab === 'myxiazai' ? 'active' : ''}`}
                                onClick={() => handleTabClick('myxiazai')}
                            >
                                我的下载
                            </div>
                            <div
                                className={`tab ${activeTab === 'wodeshouc' ? 'active' : ''}`}
                                onClick={() => handleTabClick('wodeshouc')}
                            >
                                我的收藏
                            </div>
                            <div
                                className={`tab ${activeTab === 'footprint' ? 'active' : ''}`}
                                onClick={() => handleTabClick('footprint')}
                            >
                                我的足迹
                            </div>
                            <div
                                className={`tab ${activeTab === 'following' ? 'active' : ''}`}
                                onClick={() => handleTabClick('following')}
                            >
                                我的关注
                            </div>

                            <div
                                className={`tab ${activeTab === 'messages' ? 'active' : ''}`}
                                onClick={() => handleTabClick('messages')}
                            >
                                消息中心
                            </div>
                        </div>
                        <div className="content">
                            {activeTab === 'info' &&
                                <div className='messages'>
                                    <h2 className='jiBen'>基本信息</h2>
                                    <p>
                                        <GeRenxinxi></GeRenxinxi>
                                    </p>
                                </div>
                            }
                            {activeTab === 'renwuzxin' &&
                                <div>
                                    <h2>任务中心</h2>
                                    <p>
                                        这里是任务中心
                                    </p>
                                </div>
                            }
                            {activeTab === 'qiyezhuye' && <div><h2>企业主页</h2><p>这里是企业主页</p></div>}
                            {activeTab === 'membership' && <div><h2>我的会员</h2><p>这里是我的会员内容</p></div>}
                            {activeTab === 'minelipin' && <div><h2>我的礼品</h2><p>这里是我的礼品</p></div>}
                            {activeTab === 'myxiazai' &&
                                <div>
                                    <WoDeXiaZai></WoDeXiaZai>
                                </div>
                            }
                            {activeTab === 'wodeshouc' && <div><h2>我的收藏</h2><p>这里是我的收藏</p></div>}
                            {activeTab === 'following' && <div><h2>我的关注</h2><p>这里是我的关注内容</p></div>}
                            {activeTab === 'footprint' && <div><h2>我的足迹</h2><p>这里是我的足迹内容</p></div>}
                            {activeTab === 'messages' &&
                                <div>
                                    <p>
                                        <XiaoXiZhongXin></XiaoXiZhongXin>
                                    </p>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    )
}

export default Mine;